<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: yajuan.wang
  Date: 2018/12/12
  Time: 15:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="/pages/sysIndex/default.jsp"/>
<head>
    <title>查看节点</title>
</head>
<style>
    a {
        text-decoration: none;
        color: #0C0C0C;
        font-size: 12px;
    }

    .box-body {
        margin: 10px 10px;
    }

    .square {
        font-size: 20px;
        font-family: "Helvetica Neue", Helvetica, Arial;
    }

    /*.square:focus {*/
    /*background-color: rgb(50, 184, 226);*/
    /*}*/
    .node {
        margin-bottom: 20px;
    }

    .allNode {
        font-size: 20px;
    }


</style>
<div class="main-content">
    <div class="box box-main">
        <div class="box-header">
            <%--<div class="box-title">--%>
            <%--<i class="fa icon-trophy"></i> 审批节点--%>
            <%--</div>--%>
            <div class="box-tools pull-right">
                <%--<a href="#" class="btn btn-default" id="btnSearch" title="编辑节点" onclick="editNode();"><i--%>
                <%--class="fa fa-pencil"></i> 编辑节点</a>--%>
                <%--<a href="#" class="btn btn-default" href="javascript:;" title="删除节点" onclick=" submitRemove()"><i--%>
                <%--class="fa fa-trash-o"></i> 删除节点</a>--%>
                <a href="#" class="btn btn-default" title="添加节点" onclick="addNode();"><i class="fa fa-plus"></i>
                    添加节点</a>
            </div>
        </div>
        <div class="box-body">
            <div class="node">
                <c:if test="${auditNodeList.size()!=0}">
                    <span class="allNode">完整节点：</span>
                </c:if>
                <c:forEach items="${auditNodeList}" var="auditNode" varStatus="count">
                    <c:if test="${count.index>0}">
                        <li class="glyphicon glyphicon-arrow-right countSize"></li>
                    </c:if>
                    <a href="#" class="btn btn-default square" id="${auditNode.id}"
                       title="${auditNode.nodeName}" name="${count.index}">${auditNode.nodeName}</a>
                </c:forEach>
            </div>

            <form id="detailForm" action="<c:url value="/web/admin/auditFlow/nodeJson.action"/>" method="post"
                  class="form-inline hide" data-page-no="1" data-page-size="20" data-order-by="">
                <input type="hidden" name="flowId" id="flowId" value="${auditFlow.id}"/>
                <input type="hidden" name="nodeId" id="nodeId"/>
            </form>
            <table id="auditNodeGrid"></table>
            <div id="auditNodeGridPage"></div>
        </div>

    </div>
</div>

<script>

    $('#auditNodeGrid').dataGrid({
        searchForm: $("#detailForm"),
        shrinkToFit: false,
        autoScroll: true,
        columnModel: [
            {header: 'id', name: 'id', index: 'id', width: 100, align: "center"},
            {header: '节点名称', name: 'name', index: 'flowName', width: 200, align: "center"},
            {header: '指定类型', name: 'nodeType', index: 'nodeType', width: 100, align: "center"},
            {header: '部门名称', name: 'organizationName', index: 'organizationName', width: 200, align: "center"},
            {header: '岗位名称', name: 'positionName', index: 'positionName', width: 200, align: "center"},
            {header: '人员名称', name: 'userName', index: 'userName', width: 200, align: "center"},
            {header: '上级节点名称', name: 'parentName', index: 'parentName', width: 200, align: "center"},
            {header: '创建时间', name: 'createDate', index: 'createDate', width: 200, align: "center"},
            {
                header: '操作',
                name: 'actions',
                width: 200,
                sortable: false,
                title: false,
                formatter: function (val, obj, row, act) {
                    var actions = [];
                    actions.push('<a href="javascript:;"  class="btn btn-default btn-xs btnList"   onclick="editNode(' + row.id + ')"><i class="fa fa-plus-square"></i>编辑节点</a>&nbsp;');
                    actions.push(' <a href="javascript:;"  class="btn btn-default btn-xs btnList" title="删除节点" onclick=" submitRemove(' + row.id + ')"><iclass="fa fa-trash-o"></i> 删除节点</a>');
                    return actions.join('');
                }
            }
        ],
        // 加载成功后执行事件
        ajaxSuccess: function (data) {

        }
    });

    var parentId = "";
    var id = $("#flowId").val();
    console.log("flowId" + id);

    function addNode() {
        if (parentId == "" && ${auditNodeList.size()!= 0}) {
            js.showMessage("请选择父节点", "提示", "warning");
            return false;
        }
        vLayuiUtil.openLayerWindow('wNewNode', '<c:url
                        value="/web/admin/auditFlow/addNodeDetail.action?id="/>' + id + "&&parentId=" + parentId, '新增节点')
    }

    function editNode(nodeId) {
        console.log(nodeId);
        vLayuiUtil.openLayerWindow('wNewNode', '<c:url
                        value="/web/admin/auditFlow/addNodeDetail.action?id="/>' + id + "&&nodeId=" + nodeId, '编辑')
    }

    function submitRemove(nodeId) {
        id = $("#flowId").val();
        js.confirm('你确认要删除这条数据吗？', function () {
            $.ajax({
                type: 'post',
                url: "<c:url value="/web/admin/auditFlow/deleteNode.action" />",
                data: {"id": nodeId, "flowId": id},
                dataType: 'json',
                async: false,
                success: function (data) {
                    js.showMessage(data.msg);
                    window.location.href = "<c:url value="/web/admin/auditFlow/editNodePage.action?id="/>" + id
                },
                error: function () {
                    js.showMessage("出错了，请联系管理员");
                }
            });
        })
    }

    $(".square").click(function () {
        if ($(this).css("background-color") == 'rgb(60, 141, 188)') {
            $(this).css("background-color", "#f4f4f4");
            parentId = "";
            $("#nodeId").val("");
        } else {
            $(".square").css("background-color", "#f4f4f4");
            $(this).css("background-color", "rgb(60, 141, 188)");
            parentId = $(this).attr("id");
            $("#nodeId").val(parentId);
        }
        $('#auditNodeGrid').dataGrid("refresh");
    });

</script>

